<template>
  <div class="app-container" style="margin-top:15px" >
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          size="mini"
          v-model="ExaminerQuery.examinerId"
          onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
          placeholder="审查员ID"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          size="mini"
          v-model="ExaminerQuery.examinerEmail"
          placeholder="邮箱地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
          size="mini"
          v-model="ExaminerQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          @change="startTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          size="mini"
          v-model="ExaminerQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="endTime"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button
        size="mini"
        type="primary"
        icon="el-icon-search"
        @click="getExaminerrList()"
        >查询</el-button
      >
      <el-button type="primary" size="mini" @click="toSaveExaminer">
        添加</el-button
      >
      <el-button size="mini" type="default" @click="resetData()"
        >清空</el-button
      >
    </el-form>
    <!-- 表格 -->
    <!-- v-loading="listLoading" -->
    <el-table
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" width="50" align="center">
        <template align="center" slot-scope="scope">
          <!-- {{ (page - 1) * limit + scope.$index + 1 }} -->
          {{ scope.row.examinerId }}
        </template>
      </el-table-column>
      <el-table-column
        prop="examinerName"
        label="名字"
        width="70"
        align="center"
      />
      <el-table-column label="性别" width="50" align="center">
        <template slot-scope="scope">
          <div>
            {{ scope.row.examinerSex == true ? "男" : "女" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="出生日期" width="100">
        <template slot-scope="scope">
          <!-- {{ scope.row.examinerBirth.split(" ")[0] }} 为空时不切割显示为空-->
          {{
            scope.row.examinerBirth ? scope.row.examinerBirth.split(" ")[0] : ""
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="examinerEmail" label="邮箱" />
      <el-table-column
        header-align="center"
        align="center"
        label="头像"
        width="80"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="scope.row.examinerAvatar"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="添加时间"
        align="center"
        width="160"
      />
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            prop="examinerId"
            @click="resetPwd(scope.row)"
          >
            重置密码
          </el-button>
          <el-button
            type="primary"
            size="mini"
            prop="examinerId"
            @click="showEditView(scope.row.examinerId, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            prop="examinerId"
            style="margin-left: 10px"
            type="danger"
            size="mini"
            @click="removeDataById(scope.row.examinerId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getExaminerrList"
    />
    <el-dialog
      title="编辑信息"
      :visible.sync="dialogVisible"
      width="30%"
      height="450px"
    >
      <div class="dialog">
        <el-tag class="Etag">审查员名字</el-tag>
        <el-input
          size="small"
          v-model="updateExaminer.examinerName"
          class="updateExaminer"
          max="200"
        >
        </el-input>
      </div>
      <div class="dialog">
        <el-tag class="Etag">头像</el-tag>
        <!-- 缩略图 -->
        <pan-thumb
          :image="updateExaminer.examinerAvatar"
          style="width: 80px; height: 80px; margin: 10px 0 0 10px"
        />
        <!-- 文件上传按钮 -->
        <el-button
          type="primary"
          icon="el-icon-upload"
          size="mini"
          @click="imagecropperShow = true"
          >更换头像
        </el-button>
        <!--
      v-show：是否显示上传组件
      :key：类似于id，如果一个页面多个图片上传控件，可以做区分
      :url：后台上传的url地址
      @close：关闭上传组件
      @crop-upload-success：上传成功后的回调 -->
        <!-- field的值要对应后端界面MultipartFile对应的名字 否则会上传失败 -->
        <!-- v-show="imagecropperShow" -->
        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="'/eduOss/fileOss'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"
        />
      </div>
      <!-- <span>这是一段信息</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="doUpdateExaminer()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import examinerApi from "@/api/examiner";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
export default {
  components: {
    ImageCropper,
    PanThumb,
  },
  data() {
    //定义变量和初始值
    return {
      list: null, //查询之后接口返回集合
      page: 1, //当前页数
      limit: 5, //每页记录数
      total: 0, //总记录数
      ExaminerQuery: {
        examinerId: "",
        examinerEmail: "",
        begin: "",
        end: "",
      }, //条件封装对象
      dialogVisible: false,
      updateExaminer: {
        examinerName: "",
        examinerAvatar: "",
        examinerId: "",
      },
      //上传弹框组件是否显示
      imagecropperShow: false,
      imagecropperKey: 0, //上传组件key的值
      saveBtnDisabled: false, //按钮是否禁用 重复是禁用
    };
  },
  //输入框的只能输入数字
  // watch: {
  //   ExaminerQueryExaminerId: function (val) {
  //     this.ExaminerQuery.examinerId = val.replace(/\D/g, "");
  //   },
  // },
  created() {
    //页面渲染之前执行 一般调用methods定义的方法
    this.getExaminerrList();
  },
  methods: {
    //设置时间不能超过现在
    startTime(data) {
      let now = new Date();
      let number = (now.getTime() + 8 * 60 * 60 * 1000) % (1000 * 60 * 60 * 24);
      this.ExaminerQuery.begin =
        new Date(data).getTime() - now.getTime() > 0
          ? new Date(now.getTime() - number)
          : data;
    },
    endTime(data) {
      // console.log(data);
      let now = new Date();
      let number = (now.getTime() + 8 * 60 * 60 * 1000) % (1000 * 60 * 60 * 24);
      this.ExaminerQuery.end =
        new Date(data).getTime() - now.getTime() > 0
          ? new Date(now.getTime() - number)
          : data;
    },
    //跳转到添加页面
    toSaveExaminer() {
      this.$router.push({ path: "/saveExaminerInfo" });
    },
    close() {
      //关闭上传弹框的方法
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    cropSuccess(data) {
      this.imagecropperShow = false;
      //上传之后接口返回图片地址 data.url等价于response.data.url 里面做了封装
      this.updateExaminer.examinerAvatar = data.url;
      // this.updateExaminer.examinerAvatar = this.postRequest('/eduOss/fileOss',)
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    doUpdateExaminer() {
      examinerApi.toUpdateExaminer(this.updateExaminer).then((response) => {
        if (response) {
          this.$message({
            message: "恭喜,更新成功",
            type: "success",
          });
          this.getExaminerrList(this.page);
          this.dialogVisible = false;
        }
      });
    },
    showEditView(id, data) {
      // this.updateExaminer=data  //防止编辑时出现页面数据也跟着变化
      Object.assign(this.updateExaminer, data);
      this.updateExaminer.createTime = "";
      this.dialogVisible = true;
    },

    //定义得到列表的方法
    //上面方法不用传参是内部会自动生成一个数值自动赋值给page
    // 然后我们将page再赋值给this.page
    getExaminerrList(page = 1) {
      this.page = page;
      examinerApi
        .getExaminerListPage(this.page, this.limit, this.ExaminerQuery)
        .then((response) => {
          this.list = response.data.records;
          console.log(this.list);
          this.total = response.data.total;
        });
    },
    resetData() {
      this.ExaminerQuery = {};
      this.getExaminerrList();
    },
    //重置密码
    resetPwd(data) {
      examinerApi.toResetPwd(data).then(() => {
        this.$confirm("此操作将重置该员工密码, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "重置成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      });
    },
    removeDataById(id) {
      // alert(id);
      this.$confirm("此操作将删除该员工, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        examinerApi.toRemoveExaminer(id).then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getExaminerrList(this.page-1);

        });
      });
    },
  },
};
</script>

<style>
.demo-form-inline {
  margin-bottom: 10px;
  margin-left: 10px;
}
.dialog .updateExaminer {
  width: 200px;
  margin-left: 10px;
}
.dialog .Etag {
  width: 80px;
  text-align: center;
}
.dialog:nth-child(2) {
  margin-top: 10px;
}
</style>

